<template>
<div>
  
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">11</div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple">11</div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
  <div class="panel panel-primary">
    <ul class="list-group">
      <li class="list-group-item list-group-item-success">
        欢迎您登录：尊贵的用户
      </li>
      <li class="list-group-item list-group-item-info">您有4个权限</li>
    </ul>
    <button>提交</button>
   <!--  <el-button>提交</el-button>提交
    <el-button>111</el-button>
    <el-table v-for="(value, index) in num" :key="index" >
     <span> {{ value }}  value</span>
      <el-table-column >
       <span> {{ value }}11</span>
      </el-table-column>
    </el-table> -->
    
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">权限1</button>
      <button type="button" class="btn btn-default">权限2</button>
      <button type="button" class="btn btn-default">权限3</button>
      <button type="button" class="btn btn-default">权限4</button>
      <div class="btn-group" role="group">
        <button
          type="button"
          class="btn btn-default dropdown-toggle"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          权限
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="http://www.suwell.cn/">跳转数科网维官网</a></li>
          <li><a href="http://www.baidu.com">跳转百度</a></li>

          <li><a href="https://www.jd.com/">跳转京东</a></li>
          <li><a href="https://uland.taobao.com/">跳转淘宝</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: "user",
  method: {},
  data() {
    return {
      num:[1,2,3,4,5,6],
      tableData: [
        {
          name: "水爷",
          date: "2017-08-19",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          name: "水爷",
          date: "2017-08-20",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          name: "水爷",
          date: "2017-08-21",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          name: "水爷",
          date: "2017-08-22",
          address: "上海市普陀区金沙江路 1510 弄",
        },
      ],
    };
  },
};
</script>
<style scoped>
 .el-row {
    margin-bottom: 20px;
  
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>